define([
		"jQuery", 
		"Backbone",
		"js/model/MenuModel",
		"js/model/IntroModel",
		"js/collection/MenuCollection",
		"js/view/MenuView",
		"js/view/IntroView",
		"js/view/BlogView"
	], function(
		$,
		Backbone,
		MenuModel,
		IntroModel,
		MenuCollection,
		MenuView,
		IntroView,
		BlogView
	) {

	return Backbone.Router.extend({
		routes: {
			"home": "renderHome",
			"blog": "renderBlog",
			"blog/:name": "renderBlog",
			"about": "renderAbout",
			"archives": "renderArchives",
			"contact": "renderContact",
			"path": "renderHome"
		},

		initialize: function() {
			console.log("MainRouter - Initialize");

			this.$menu = $("#menu");
			this.$intro = $("#intro");
			this.$content = $("#content");

			this.createMenu();
			this.renderMenu();
		},

		renderHome: function() {
			console.log("Render - Home");
			this.menuView.setSelected("Home");
			this.renderHomeIntro();
			this.renderDefaultContent();
		},

		renderBlog: function(name) {
			console.log("Render - Blog");
			this.menuView.setSelected("Blog");
			this.renderBlogIntro();
			this.renderBlogContent(name);
		},

		renderAbout: function() {
			console.log("Render - About");
			this.menuView.setSelected("About");
			this.renderDefaultIntro();
			this.renderDefaultContent();
		},

		renderArchives: function() {
			console.log("Render - Archives");
			this.menuView.setSelected("Archives");
			this.renderDefaultIntro();
			this.renderDefaultContent();
		},

		renderContact: function() {
			console.log("Render - Contact");
			this.menuView.setSelected("Contact");
			this.renderDefaultIntro();
			this.renderDefaultContent();
		},

		createMenu: function() {
			var self = this;

			var menuItems = [
				new MenuModel(
					{
						label: "Home",
						href: "#home"
					}
				),
				new MenuModel(
					{
						label: "Blog",
						href: "#blog"
					}
				),
				new MenuModel(
					{
						label: "About",
						href: "#about"
					}
				),
				new MenuModel(
					{
						label: "Archives",
						href: "#archives"
					}
				),
				new MenuModel(
					{
						label: "Contact",
						href: "#contact"
					}
				)
			];

			this.menuCollection = new MenuCollection(menuItems);
			this.menuView = new MenuView({
				collection: self.menuCollection
			});
		},

		renderMenu: function() {
			this.$menu.empty().append(this.menuView.render().el);
		},

		renderHomeIntro: function() {
			if (this.homeIntro == null) {
				var self = this;

				this.homeIntro = new IntroModel({
					background: "homeBackground"
				});

				this.homeIntroView = new IntroView({
					model: self.homeIntro
				});
			}

			this.$intro.empty().append(this.homeIntroView.render().el);
		},

		renderBlogIntro: function() {
			if (this.blogIntro == null) {
				var self = this;

				this.blogIntro = new IntroModel({
					background: "blogBackground",
					title: "The place where fantasy meets technology...",
					description: "If coding is your passion or if you enjoy playing and making games or if you're just looking for some answers to your tech related questions, then my friend, you might have come to the right place."
				});

				this.blogIntroView = new IntroView({
					model: self.blogIntro
				});
			}

			this.$intro.empty().append(this.blogIntroView.render().el);
		},

		renderDefaultIntro: function() {
			this.$intro.empty();
		},

		renderBlogContent: function(name) {
			if (this.blogView == null) {
				this.blogView = new BlogView({
					name: name
				});
			}

			this.$content.empty().append(this.blogView.render().el);
		},

		renderDefaultContent: function() {
			this.$content.empty();
		}
	});
});